<template>
  <div class="u-p-20">
    <el-card shadow="never">
      <div slot="header">
        <b class="u-f-16">
          <span v-if="objForm.id">编辑</span>
          <span v-else>添加</span>图文内容
        </b>
        <div class="u-right u-5mt">
          <el-button type="success" size="small" icon="el-icon-document-checked" @click="submitForm('objForm')">提交保存
          </el-button>
          <el-button size="small" icon="el-icon-back" @click="$router.go(-1)">返回</el-button>
        </div>
      </div>
      <el-form :model="objForm" :rules="rules" ref="objForm" label-width="100px" class="u-form">
        <el-tabs v-model="activeName">
          <el-tab-pane label="基本信息" name="basic">
            <el-form-item label="导航">
              <el-select v-model="objForm.type_id" clearable>
                <el-option label="全部" :value="0"></el-option>
                <el-option v-for="(item, index) in typeList" :key="index" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="标题" prop="title">
              <el-input v-model="objForm.title" placeholder="请输入标题" maxlength="30" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="来源" prop="author">
              <el-input v-model="objForm.author" placeholder="请输作者、网络来源" maxlength="30" show-word-limit></el-input>
            </el-form-item>
            <el-form-item label="排序">
              <el-input v-model="objForm.sort" placeholder="数字越大权重越高"></el-input>
            </el-form-item>
            <el-form-item label="描述">
              <el-input v-model="objForm.desc" type="textarea" placeholder="描述" maxlength="200" show-word-limit>
              </el-input>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="视频图集" name="imgs">
            <el-form-item label="视频" prop="video_url">
              <upload-video file-folder="companyVideo" :file-arr="fileListVideo" list-type="picture-article" :limit="1"
                accept="video/mp4" tips="只能上传mp4文件，且不超过200MB" @getUploadFiles="getUploadmp4Files"></upload-video>
            </el-form-item>
            <el-form-item label="相册图片" prop="photo">
              <upload-drag file-folder="companyPhoto" :file-arr="fileList1" :multiple="true" list-type="picture-card"
                :limit="10" accept="image/jpeg, image/png" tips="只能上传jpg/png文件，且不超过4MB" @getUploadFiles="getUpPhoto">
              </upload-drag>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="内容详情" name="content">
            <el-form-item label="内容">
              <wangeditor :content="objForm.content" @getHtml="getHtml"></wangeditor>
            </el-form-item>
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import commonEdit from "@/mixins/common-edit";
import UploadVideo from "@/components/upload/uploadvideo";
import UploadDrag from "@/components/uploaddrag/uploaddrag";
import Wangeditor from "@/components/wangeditor/index";
export default {
  components: {
    UploadVideo,
    UploadDrag,
    Wangeditor,
  },
  mixins: [commonEdit],
  data() {
    return {
      apiName: "contentArticle",
      backRoute: "contentArticleIndex",
      activeName: "basic",
      fileListVideo: [],
      fileList1: [],
      objForm: {
        id: "",
        title: "",
        type_id: 0,
        tag: "",
        desc: "",
        author: "平台",
        photo: [],
        sort: 0,
        content: "",
        video_url: "",
      },
      typeList: [
        {
          id: 1,
          name: "处理方法",
        },
        {
          id: 1,
          name: "美食鉴赏",
        },
      ],
      rules: {
        title: [
          {
            required: true,
            message: "请输入标题",
            trigger: "blur",
          },
          {
            max: 30,
            message: "最大长度30个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    getHtml(val) {
      this.objForm.content = val;
    },
    getUploadmp4Files(files) {
      //封面上传回调
      this.fileListVideo = files;
      this.objForm.video_url = files[0]["url"];
    },
    getUpPhoto(files) {
      //相册上传回调
      this.fileList1 = files;
      this.objForm.photo = "";
      for (var i = 0; i < files.length; i++) {
        this.objForm.photo +=
          this.objForm.photo == "" ? files[i].url : "," + files[i].url;
      }
    },
    getTypeList() {
      let that = this;
      this.$api["contentType"].all().then((response) => {
        if (response.code == 1) {
          that.typeList = response.data;
        }
      });
    },
    beforeGetInfo() {
      this.getTypeList();
    },
    afterGetInfo() {
      this.objForm.photo = this.objForm.photo
        ? this.objForm.photo.split(",")
        : [];
      for (var i = 0; i < this.objForm.photo.length; i++) {
        this.fileList1.push({
          url: this.objForm.photo[i],
        }); //相册
      }
      if (this.objForm.video_url) {
        this.fileListVideo = [
          {
            url: this.objForm.video_url
          }
        ];
      }

    },
  },
};
</script>
